window.onload = function() {
    init();
}


/* background-color: rgb(249, 249, 249); */

/* <li>Hit the gym</li>
<li>Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
<li>Read a book</li>
<li>Organize office</li> */


function init() {
    document.getElementById("addthingid").value = "Hit the gym";
    thingsAdd();
    document.getElementById("addthingid").value = "Pay bills";
    thingsAdd();
    document.getElementById("addthingid").value = "Meet George";
    thingsAdd();
    document.getElementById("addthingid").value = "Buy eggs";
    thingsAdd();
    document.getElementById("addthingid").value = "Read a book";
    thingsAdd();
    document.getElementById("addthingid").value = "Organize office";
    thingsAdd();
    document.getElementById("addthingid").value = "";
}

function thingsAdd() {
    var thingToAdd = document.getElementById("addthingid").value;
    if (thingToAdd == "") {
        return;
    }
    var thingsList = document.getElementById("toDoThingsId");

    var newli = document.createElement("li");
    var newlitxt = document.createElement("div");
    var newlidelete = document.createElement("div");

    newlitxt.innerHTML = thingToAdd;
    newlitxt.className = "txtPart";
    newlidelete.innerText = "Ⅹ";
    newlidelete.className = "deletePart";

    newli.appendChild(newlitxt);
    newli.appendChild(newlidelete);
    thingsList.appendChild(newli);

    document.getElementById("addthingid").value = "";

    console.log("add " + thingToAdd);

    updateStyle(thingsList);
}

function thingsDelete(num) {
    var thingsList = document.getElementById("toDoThingsId");
    var thingslis = thingsList.children;

    console.log("remove " + thingslis[num].getElementsByClassName("txtPart")[0].innerHTML);
    thingslis[num].remove();

    updateStyle(thingsList);
}

function updateStyle(thingsList) {
    var thinglis = thingsList.children;
    for (var i = 0; i < thingsList.childElementCount; i++) {

        var newlidelete = thinglis[i].getElementsByClassName("deletePart")[0];
        newlidelete.setAttribute("onclick", "thingsDelete(" + i + ")");

        if (i % 2 == 0) {
            thinglis[i].className = "bgcwhite";
        } else {
            thinglis[i].className = "";
        }
    }

}